<!DOCTYPE html>
<html lang="en">

<head>

    {{template "common/head.html" .}}

    <style type="text/css">.page-class-student {
        position: relative;
        height: 100%;
        padding: 40px 30px 80px;
      }
      .page-class-student-class-number {
        position: absolute;
        top: 40px;
        right: 0;
        height: 26px;
        line-height: 26px;
        border-top-left-radius: 13px;
        border-bottom-left-radius: 13px;
        -webkit-box-shadow: 3px 2px 9px 0px rgba(145, 124, 24, 0.49);
                box-shadow: 3px 2px 9px 0px rgba(145, 124, 24, 0.49);
        background-color: #fff;
        padding: 0 15px;
      }
      .page-class-student-container {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
            -ms-flex: 1;
                flex: 1;
        overflow: scroll;
      }
      .page-class-student-item {
        height: 100px;
        width: 100%;
        background: #fff;
        -webkit-box-shadow: 3px 2px 9px 0px rgba(145, 124, 24, 0.49);
                box-shadow: 3px 2px 9px 0px rgba(145, 124, 24, 0.49);
        border-radius: 13px;
        padding: 10px 20px;
      }
      .page-class-student-item-avatar {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 68px;
            -ms-flex: 0 0 68px;
                flex: 0 0 68px;
        height: 68px;
        overflow: hidden;
        border-radius: 100%;
        background-color: #ccc;
      }
      .page-class-student-item-avatar img {
        width: 68px;
        height: 68px;
        display: block;
      }
      .page-class-student-student-item {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 20%;
            -ms-flex: 0 0 20%;
                flex: 0 0 20%;
        margin-bottom: 10px;
      }
      .page-class-student-student-avatar {
        position: relative;
        width: 45px;
        height: 45px;
        border-radius: 100%;
        background-color: #fff;
        margin: 0 auto;
      }
      .page-class-student-student-avatar img {
        position: absolute;
        width: 35px;
        height: 35px;
        left: 5px;
        top: 5px;
      }
      </style>
</head>

<body>
    <div class="page-main">
        <div class="page-main-container">
            <div flex="dir:top" class="child-view page-class-student">
                <div flex="cross:bottom" class="ui-mg-b-24 page-class-student-title">
                    <span class="ui-text-28">学生{{.studentInfo.RealName}}</span>
                </div>
                <div class="ui-text-18 page-class-student-class-number">{{.studentInfo.Class.Name}}</div>
                <div flex="" class="no-scrollbar page-class-student-container">
                    {{range .userList}}
                        <div flex="" class="page-class-student-item">
                            <div class="page-class-student-item-avatar">
                                <img src="" alt="">
                            </div>
                            <div class="ui-pd-l-24 ui-pd-t-6 page-class-student-item-info">
                                <div class="ui-text-18 ui-mg-b-8 ui-line-10 page-class-student-item-name">{{.RealName}}</div>
                                <div class="ui-line-15 ui-text-12 page-class-student-item-parent">
                                    {{$.studentInfo.RealName}}的{{.StudentRelation.Name}}
                                </div>
                                <div class="ui-line-15 ui-text-12 page-class-student-item-phone">
                                    电话：{{.Phone}}
                                </div>
                            </div>
                        </div>
                    {{end}}
                </div>
            </div>
        </div>
    </div>
</body>

</html>